<template>
  <div>
    <q-markup-table  class="">
      <thead>
      <tr>
        <th  v-for="(item) in data[0]" :key="item.name" :class="item.align === 'center' ? 'text-center' : item.align === 'left' ? 'text-left' : 'text-right'">{{item.label}}</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(row,index) in data" :key="index">
        <td v-for="(cell, i) in row" :key="i" class="text-left">
          <div v-if="cell.tag === 'text'" :class="cell.align === 'center' ? 'text-center' : cell.align === 'left' ? 'text-left' : 'text-right'">
            {{cell.value}}
          </div>
          <div v-else-if="cell.tag ==='order'" :class="cell.align === 'center' ? 'text-center' : cell.align === 'left' ? 'text-left' : 'text-right'">
            {{index+1}}
          </div>
          <div v-else-if="cell.tag === 'color'" :class="cell.align === 'center' ? 'text-center' : cell.align === 'left' ? 'text-left' : 'text-right'">
            <div :style="{
              background: `${cell.value}`,
              height: '30px',
              width: '200px'
            }">
            </div>
          </div>
          <div v-else class="q-gutter-md row justify-around">
            <q-btn color="positive">编辑</q-btn>
            <q-btn color="negative" @click="deleteLine(index)">删除</q-btn>
          </div>
        </td>
      </tr>
      </tbody>
      <div class="flex flex-center" style="width: 100%;">
        <q-pagination
        v-model="current"
        color="deep-orange"
        :max="5"
        input
        input-class="text-orange-10"
        boundary-links
      />
      </div>
    </q-markup-table>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue'
export default defineComponent({
  name: 'DisplayTable',
  props: {
    data: {
      type: Array,
      required: true,
      default: function () {
        return []
      }
    }
    // columns:{
    //   type: Array,
    //   required: true,
    //   default: function () {
    //     return []
    //   }
    // }
  },
  setup () {
    const data = ref([[
      { name: 'order', label: '序号', field: 'order', align: 'left', tag: 'text', type: '', options: [] },
      { name: 'name', label: '标签名称', field: 'name', align: 'center', tag: 'text', type: 'number', options: [] },
      { name: 'color', label: '标签颜色', field: 'color', align: 'center', tag: 'text', type: '', options: [] },
      { name: 'operate', label: '操作', field: 'operate', align: 'center', tag: 'text', type: '', options: [] }
    ],
    [
      { name: 'order', label: '序号', field: 'order', value: '', align: 'left', tag: 'order', type: '', options: [] },
      { name: 'name', label: '马桥经编-网格一', field: 'name', value: '马桥经编-网格一', align: 'center', tag: 'text', type: 'number', options: [] },
      { name: 'color', label: '', field: 'color', value: '#ff9999', align: 'center', tag: 'color', type: '', options: [] },
      { name: 'operate', label: '操作', field: 'operate', align: 'center', value: '', tag: 'operate', type: '', options: [] }
    ],
    [
      { name: 'order', label: '序号', field: 'order', value: '', align: 'left', tag: 'order', type: '', options: [] },
      { name: 'name', label: '马桥经编-网格一', field: 'name', value: '马桥经编-网格一', align: 'center', tag: 'text', type: 'number', options: [] },
      { name: 'color', label: '', field: 'color', value: '#00f500', align: 'center', tag: 'color', type: '', options: [] },
      { name: 'operate', label: '操作', field: 'operate', align: 'center', value: '', tag: 'operate', type: '', options: [] }
    ]
    ])
    // const columns = [
    //   { name: 'order', label: '序号', field: 'order', align: 'left', tag: 'text', type: '', options: [] },
    //   { name: 'name', label: '标签名称', field: 'name', align: 'center', tag: 'text', type: 'number', options: [] },
    //   { name: 'color', label: '标签颜色', field: 'color', align: 'center', tag: 'text', type: '', options: [] },
    //   { name: 'operate', label: '操作', field: 'operate', align: 'center', tag: 'text', type: '', options: [] }
    // ]
    const current = ref(1) // 当前页码
    const getProps = function () {

    }
    const deleteLine = function (index) {
      data.value.splice(index, 1)
    }
    onMounted(() => {
      getProps()
    })
    return {
      // data,
      // columns,
      deleteLine,
      current
    }
  }
})
</script>

<style scoped>

</style>
